<template>
    <div>
        <div class="footer">
            <p class="iconfont icon-gouwuche icon" :class="totalPrice?'icon-1':''" @click="onShowCart"></p>
            <div class="price"  @click="onShowCart">
                <p>￥{{totalPrice}}</p>
                <p>另需配送费￥{{carriage}}</p>
            </div>
            <mt-button class="btn" :class="totalPrice?'btn-1':''" @click="orderForm">结算</mt-button>
        </div>
        <div class="shop_cart" :class="showCart?'':'hidden'">
            <p class="iconfont icon-shanchu del-icon" v-show="cartList.length !== 0" @click="delCart">清空</p>
            <p class="no_data" v-if="cartList.length == 0">暂无商品</p>
            <p class="cart-list" v-for="(item,index) of $store.getters.cart" :key="index" v-else>
                <span class="cart-item">{{item.name}}</span>
                <span class="cart-item">{{item.num}}</span>
                <span class="cart-item">￥{{item.price}}</span>
            </p>

        </div>
    </div>
</template>
<script>
import {cartList,emptyCart} from '../api'
import {Toast} from 'mint-ui'
export default {
    name:"shopFooter",
    data() {
        return {
            showCart:false,
            cartList:[],
            totalPrice:0,
            carriage:this.$store.getters.freight.delivery
        }
    },
    created(){
        this.getTotalPrice()
    },
    methods:{
        orderForm(){
            if(this.totalPrice <= 0){
                Toast('请选择商品')
                return;
            }else{
                // const data = {store_id:parseInt(this.$route.query.id),token:this.$store.getters.token,user_id:this.$store.getters.userInfo.id,total:this.totalPrice,delivery_price:this.carriage}
                // newOrder().then(res=>{
                //     console.log(res);
                // })
                // console.log(this.$route.query.id);
                this.$router.push({path:'/creatOrder',query:{store_id:this.$route.query.id}})
            }
        },
        getTotalPrice(){
                const data = {store_id:parseInt(this.$route.query.id),token:this.$store.getters.token,user_id:this.$store.getters.userInfo.id}
                cartList(data).then(res=>{
                    this.$set(this,'cartList',res.data);
                    this.$store.commit('ADD_CART',res.data);
                    let math = require('mathjs');
                    console.log(this.$store.getters.cart)
                    let cart = this.$store.getters.cart;
                    let total=0;
                    for(let item of cart){
                        // total+=item.price*item.num;
                        total+=item.price*item.num*100000
                    }
                    this.totalPrice = total/100000;
                    this.$store.commit('TOTAL',this.totalPrice)
                    
                    const freight = this.$store.getters.freight;
                    // console.log(total >= freight.limit)
                    if(this.totalPrice >= freight.limit){
                        this.carriage = Math.round((Number(this.totalPrice)*Number(freight.percentage)*0.01*100))/100;
                    }else{
                        this.carriage = freight.delivery;
                    }
                    this.$store.commit('CARRIAGE',this.carriage)
                })
        },
        onShowCart(){
            this.showCart = !this.showCart
        },
        delCart(){
            const data={store_id:parseInt(this.$route.query.id),token:this.$store.getters.token,user_id:this.$store.getters.userInfo.id}
                emptyCart(data).then(res=>{
                    console.log(res);
                    this.$store.commit("DEL_CART");
                    this.getTotalPrice();
                    this.$emit('delNum',{})
                })
        }
    }
}
</script>
<style scoped>
    .footer {
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        width: 100%;
        background: #F7F7F7;
        color: #fff;
        height: 4rem;
    }
    .icon {
        font-size: 2rem;
        background: #aaa;
        color: #fff;
        border-radius: 50%;
        padding: 0.5rem;
        width: 3rem;
        height: 3rem;
        text-align: center;
        line-height: 3rem;
        font-weight: bolder;
        margin: -1rem 0 0 0.5rem;
        box-shadow: 0.1rem 0.1rem 0.2rem #ccc;
        position: relative;
        z-index: 100;
    }
    .icon-1{
        background: #fff;
        color: #F23D3D;
    }
    .price {
        margin-top: 0.5rem;
        height: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 40%;
        color: #F23D3D;
        font-weight: bolder;
    }
    .price p:last-child{
        color: #9b9b9b;
        font-size: 0.8rem;
    }
    .btn{
        width:40%;
        height: 100%;
        margin: 0;
        background: #ccc;
        border-radius: 0;
        color: #fff;
        font-size: 1rem;
    }
    .btn-1{
        background: #F23D3D;
        font-size: 1.5rem;
    }
    .shop_cart {
        width: 94%;
        min-height: 2rem;
        background: #F23D3D;
        position: absolute;
        bottom: 4rem;
        transition: all 2s;
        padding: 3%;
        color: #fff;
        line-height: 2rem;
    }
    .no_data {
        text-align: center;
        line-height: 2rem;
        color: #fff;
    }
    .hidden {
        bottom: 0;
        display: none;
        transition: all 2s;
    }
    .del-icon {
        text-align: right;
    }
    .cart-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .cart-item{
        width: 33%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }
    .cart-item:last-child{
        text-align: right;
    }
</style>